<template>
  <div class="pages transactionSee">
    <div class="pageLevel">
      <!-- 头部 -->
      <el-button style="margin:10px 0 10px 30px;" type="primary" @click="goBack()"> 返回</el-button>
      <el-button  v-if="setRole('电子回单')" @click="Receipt()" style="margin:10px 0 10px 30px;" type="primary">电子回单</el-button>
      <div class="content" v-if="showTab=='RECHARGE'">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="入账金额：">
            <span>{{tableData.price}}</span>
          </el-form-item>
          <el-form-item label="账单分类：">
            <span>{{tableData.typeName}}</span>
          </el-form-item>
          <el-form-item label="账户：">
            <span>{{tableData.memo}}</span>
          </el-form-item>
          <el-form-item label="时间：">
            <span>{{tableData.createTime}}</span>
          </el-form-item>
          <el-form-item label="订单号：">
            <span>{{tableData.bizOrderNo}}</span>
          </el-form-item>
        </el-form>
      </div>
      <div class="content" v-if="showTab=='TASKCASH'">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="出账金额: ">
            <span>{{tableData.price}}</span>
          </el-form-item>
          <el-form-item label="账单分类：">
            <span>{{tableData.typeName}}</span>
          </el-form-item>
          <el-form-item label="账户：">
            <span>{{tableData.memo}}</span>
          </el-form-item>
          <el-form-item label="状态：">
            <span v-if="tableData.status==1">成功</span>
            <span v-if="tableData.status==2">处理中</span>
          </el-form-item>
          <el-form-item label="时间：">
            <span>{{tableData.createTime}}</span>
          </el-form-item>
          <el-form-item label="订单号：">
            <span>{{tableData.bizOrderNo}}</span>
          </el-form-item>
        </el-form>
      </div>
      <div class="content" v-if="showTab=='TRANSFER_OUT'">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="出账金额: ">
            <span>{{tableData.price}}</span>
          </el-form-item>
          <el-form-item label="账单分类：">
            <span>{{tableData.typeName}}</span>
          </el-form-item>
          <el-form-item label="收款方：">
            <span>{{tableData.payeeName}}</span>
          </el-form-item>
          <el-form-item label="时间：">
            <span>{{tableData.createTime}}</span>
          </el-form-item>
          <el-form-item label="订单号：">
            <span>{{tableData.bizOrderNo}}</span>
          </el-form-item>
        </el-form>
      </div>
      <div class="content" v-if="showTab=='TRANSFER_IN'">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="入账金额: ">
            <span>{{tableData.price}}</span>
          </el-form-item>
          <el-form-item label="账单分类：">
            <span>{{tableData.typeName}}</span>
          </el-form-item>
          <el-form-item label="付款方：">
            <span>{{tableData.payerName}}</span>
          </el-form-item>
          <el-form-item label="时间：">
            <span>{{tableData.createTime}}</span>
          </el-form-item>
          <el-form-item label="订单号：">
            <span>{{tableData.bizOrderNo}}</span>
          </el-form-item>
        </el-form>
      </div>
      <div class="content" v-if="showTab=='RECHARGE_FEE' ||showTab=='TASKCASH_FEE'||showTab=='B2CPAY_FEE'">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="出账金额: ">
            <span>{{tableData.price}}</span>
          </el-form-item>
          <el-form-item label="账单分类：">
            <span>{{tableData.typeName}}</span>
          </el-form-item>
          <el-form-item label="时间：">
            <span>{{tableData.createTime}}</span>
          </el-form-item>
          <el-form-item label="订单号：">
            <span>{{tableData.orderNo}}</span>
          </el-form-item>
        </el-form>
      </div>
      <div class="content" v-if="showTab=='B2CPAY'">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="入账金额: ">
            <span>{{tableData.price}}</span>
          </el-form-item>
          <el-form-item label="账单分类：">
            <span>{{tableData.typeName}}</span>
          </el-form-item>
          <el-form-item label="时间：">
            <span>{{tableData.createTime}}</span>
          </el-form-item>
          <el-form-item label="订单号：">
            <span>{{tableData.bizOrderNo}}</span>
          </el-form-item>
          <div class="from_main infon">
            <div class="infon_text">
              <span class="infon_shu"></span>
              <span class="infon_text_t">销售商品</span>
            </div>
          </div>
          <ul class="infon_text-ul">
            <li class="li-height" v-for="(billsms, index) in tableData.goodsData" :key="index">
              {{billsms.goodsName}}
              <span class="span1">{{billsms.goodsPrice}}*{{billsms.goodsNum}} </span>
              <span>￥{{billsms.goodsMoney}}</span>
            </li>
            <li>
              商品合计:
              <span>￥{{tableData.orderAmount}}</span>
            </li>
            <li>
              商品折扣:
              <span>-￥{{tableData.activityAmount}}</span>
            </li>
            <li>
              议价金额:
              <span>-￥{{tableData.bargainingAmount}}</span>
            </li>
          </ul>
        </el-form>
      </div>
      <div class="content" v-if="showTab=='B2CRETURN'">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="出账金额: ">
            <span>{{tableData.price}}</span>
          </el-form-item>
          <el-form-item label="账单分类：">
            <span>{{tableData.typeName}}</span>
          </el-form-item>
          <el-form-item label="时间：">
            <span>{{tableData.createTime}}</span>
          </el-form-item>
          <el-form-item label="订单号：">
            <span>{{tableData.bizOrderNo}}</span>
          </el-form-item>
          <div class="from_main infon">
            <div class="infon_text">
              <span class="infon_shu"></span>
              <span class="infon_text_t">退款商品</span>
            </div>
          </div>
          <ul class="infon_text-ul">
            <li class="li-height" v-for="(billsms, index) in tableData.goodsData" :key="index">
              {{billsms.goodsName}}
              <span class="span1">{{billsms.goodsPrice}}*{{billsms.goodsNum}} </span>
              <span>￥{{billsms.goodsMoney}}</span>
            </li>
            <li>
              商品合计:
              <span>￥{{tableData.orderAmount}}</span>
            </li>
            <li>
              商品折扣:
              <span>-￥{{tableData.activityAmount}}</span>
            </li>
            <li>
              议价金额:
              <span>-￥{{tableData.bargainingAmount}}</span>
            </li>
          </ul>
        </el-form>
      </div>
      <div class="content" v-if="showTab=='B2BPAY_OUT'">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="出账金额: ">
            <span>{{tableData.price}}</span>
          </el-form-item>
          <el-form-item label="账单分类：">
            <span>{{tableData.typeName}}</span>
          </el-form-item>
          <el-form-item label="供货方：">
            <span>{{tableData.payeeName}}</span>
          </el-form-item>
          <el-form-item label="时间：">
            <span>{{tableData.createTime}}</span>
          </el-form-item>
          <el-form-item label="订单号：">
            <span>{{tableData.bizOrderNo}}</span>
          </el-form-item>
          <div class="from_main infon">
            <div class="infon_text">
              <span class="infon_shu"></span>
              <span class="infon_text_t">采购商品</span>
            </div>
          </div>
          <ul class="infon_text-ul">
            <li class="li-height" v-for="(billsms, index) in tableData.goodsData" :key="index">
              {{billsms.goodsName}}
              <span class="span1">{{billsms.goodsPrice}}*{{billsms.goodsNum}} </span>
              <span>￥{{billsms.goodsMoney}}</span>
            </li>
            <li>
              商品合计:
              <span>￥{{tableData.orderAmount}}</span>
            </li>
            <li>
              商品折扣:
              <span>-￥{{tableData.activityAmount}}</span>
            </li>
            <li>
              运费:
              <span>-￥{{tableData.freight}}</span>
            </li>
            <li>
              税费:
              <span>-￥{{tableData.taxAmount}}</span>
            </li>
          </ul>
        </el-form>
      </div>
      <div class="content" v-if="showTab=='B2BPAY_IN'">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="入账金额: ">
            <span>{{tableData.price}}</span>
          </el-form-item>
          <el-form-item label="账单分类：">
            <span>{{tableData.typeName}}</span>
          </el-form-item>
          <el-form-item label="付款方：">
            <span>{{tableData.payerName}}</span>
          </el-form-item>
          <el-form-item label="时间：">
            <span>{{tableData.createTime}}</span>
          </el-form-item>
          <el-form-item label="订单号：">
            <span>{{tableData.bizOrderNo}}</span>
          </el-form-item>
          <div class="from_main infon">
            <div class="infon_text">
              <span class="infon_shu"></span>
              <span class="infon_text_t">采购商品</span>
            </div>
          </div>
          <ul class="infon_text-ul">
            <li class="li-height" v-for="(billsms, index) in tableData.goodsData" :key="index">
              {{billsms.goodsName}}
              <span class="span1">{{billsms.goodsPrice}}*{{billsms.goodsNum}} </span>
              <span>￥{{billsms.goodsMoney}}</span>
            </li>
            <li>
              商品合计:
              <span>￥{{tableData.orderAmount}}</span>
            </li>
            <li>
              商品折扣:
              <span>-￥{{tableData.activityAmount}}</span>
            </li>
            <li>
              运费:
              <span>-￥{{tableData.freight}}</span>
            </li>
            <li>
              税费:
              <span>-￥{{tableData.taxAmount}}</span>
            </li>
          </ul>
        </el-form>
      </div>
      <div class="content" v-if="showTab=='B2BRETURN'">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="入账金额: ">
            <span>{{tableData.price}}</span>
          </el-form-item>
          <el-form-item label="账单分类：">
            <span>{{tableData.typeName}}</span>
          </el-form-item>
          <el-form-item label="付款方：">
            <span>{{tableData.payerName}}</span>
          </el-form-item>
          <el-form-item label="时间：">
            <span>{{tableData.createTime}}</span>
          </el-form-item>
          <el-form-item label="订单号：">
            <span>{{tableData.bizOrderNo}}</span>
          </el-form-item>
          <div class="from_main infon">
            <div class="infon_text">
              <span class="infon_shu"></span>
              <span class="infon_text_t">退货商品</span>
            </div>
          </div>
          <ul class="infon_text-ul">
            <li class="li-height" v-for="(billsms, index) in tableData.goodsData" :key="index">
              {{billsms.goodsName}}
              <span class="span1">{{billsms.goodsPrice}}*{{billsms.goodsNum}} </span>
              <span>￥{{billsms.goodsMoney}}</span>
            </li>
            <li>
              商品合计:
              <span>￥{{tableData.orderAmount}}</span>
            </li>
            <li>
              商品折扣:
              <span>-￥{{tableData.activityAmount}}</span>
            </li>
            <li>
              运费:
              <span>-￥{{tableData.freight}}</span>
            </li>
            <li>
              税费:
              <span>-￥{{tableData.taxAmount}}</span>
            </li>
          </ul>
        </el-form>
      </div>
      <div class="content" v-if="showTab=='OFFLINE_TRANSFER'">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="入账金额: ">
            <span>{{tableData.price}}</span>
          </el-form-item>
          <el-form-item label="账单分类：">
            <span>{{tableData.typeName}}</span>
          </el-form-item>
          <el-form-item label="银行卡号：">
            <span>{{tableData.payerAccountNo}}</span>
          </el-form-item>
          <el-form-item label="时间：">
            <span>{{tableData.createTime}}</span>
          </el-form-item>
          <el-form-item label="订单号：">
            <span>{{tableData.bizOrderNo}}</span>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { findPayBillInfo, getElectronic } from "@/api";
import util from "@/util";
export default {
  computed: mapState(["merchantId", "path","power"]),
  data() {
    return {
      id: "",
      showTab: "",
      showTabtype: "",
      tableData: {},
      ruleForm: {
        name: "111"
      },
      rules: {
        name: [{ required: true, message: "请输入打款金额", trigger: "blur" }]
      }
    };
  },
  created() {
    this.showTab = util.getQuery().showTab;
    this.id = util.getQuery().id;
  },
  mounted() {
    this.getdata();
  },
  methods: {
      //配置权限
    setRole(key) {
      return util.selectTitle(this.power, key);
    },
    Receipt() {
      console.log(this.tableData.orderNo);
      let postdata = {
        userId: this.merchantId,
        orderNo: this.tableData.childNo
      };
      getElectronic(postdata).then(res => {
       window.open("./static/electronicReceipt/egg.html?actionUrl="+res.data.actionUrl+ "&ptncode="+res.data.ptncode+ "&trdcode="+res.data.trdcode+ "&message="+res.data.message+ "&signature="+res.data.signature);
      });
    },
    getdata() {
      let postdata = {
        orgId: this.merchantId,
        billType: this.showTab,
        payBillId: this.id
      };
      findPayBillInfo(postdata).then(res => {
        this.tableData = res.data;
      });
    },
    goBack() {
      history.back();
    }
  }
};
</script>
<style scoped>
.content {
  width: 800px;
  margin: 20px 0 0 30px;
}
.transactionSee span {
  color: #606266;
}
.infon_text-ul {
  margin-left: 85px;
  width: 750px;
  height: 200px;
}
.infon_text-ul li {
  width: 100%;
  line-height: 44px;
  font-size: 16px;
  color: #6b6b6b;
  text-indent: 20px;
  position: relative;
  font-weight: bolder;
}
.infon_text-ul .lines {
  border-bottom: 1px dashed #ccc;
}
.infon_text-ul li .span1 {
  position: absolute;
  right: 350px;
}
.infon_text-ul li span {
  position: absolute;
  right: 25px;
}
.infon_text-ul .li-font {
  font-weight: normal;
}

.infon_text-ul .li-height {
  height: 50px;
  line-height: 50px;
}
.infon_text-ul .li-red span {
  color: red;
}
</style>

